<template>
	<view class="layout">
		<view class="layout-header">
			<DistributionNavBar title="我的收益">
				<template slot="left">
					<image :src="bankIcon" @click="clickBack" />
				</template>
			</DistributionNavBar>
		</view>

		<view class="layout-main">
			<view class="layout-main-income" @click="goToHistory">
				<view>收益明细</view>
				<image class="layout-main-income-icon" src="@/static/images/income/icon_income_right.png" />
			</view>

			<image src="https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_57da6df543c746cdbf7eb2c936ba8b91.png" />
			
			<view class="layout-main-title">
				<text>可提现收益（元）</text>
				<text>{{ incomeParams.cashProfitYuan | getLocaleMoneyIncome }}</text>
			</view>

			<view
				class="layout-main-typeAmount"
				:style="{
					backgroundImage: 'url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_0e0c783f08924e87b3833ca79975993e.png)'
				}"
			>
				<view class="layout-main-typeAmount-content">
					<view class="layout-main-typeAmount-content-item" :key="item.type" v-for="item in typeAmountList">
						<view class="layout-main-typeAmount-content-item-text">
							{{ item.label }}
						</view>
						<view class="layout-main-typeAmount-content-item-money">
							{{ incomeParams[item.type] || '0.00' }}
						</view>
					</view>
				</view>

				<view class="layout-main-typeAmount-hint">本月、今日、近7天收益包含“拍摄费收益+分销收益”</view>
			</view>
		</view>

		<view class="layout-withdraw">
			<view class="layout-withdraw-title">
				<image src="/static/icon/icon_income_tx@3x.png" />
				<view>收益提现</view>
			</view>

			<view class="layout-withdraw-main">
				<input
					type="digit"
					v-model.trim="cashMoney"
					@blur="changeSearchValue"
					:placeholder="inputPlaceholder"
					class="layout-withdraw-main-input"
					placeholder-class="layout-withdraw-main-input-placeholder"
				/>
				<view class="layout-withdraw-main-close" v-if="cashMoney">
					<image
						@click="clearCashMoney"
						class="layout-withdraw-main-close-icon"
						src="@/static/images/income/icon_sqtx_close.png"
					/>
				</view>
				<view class="layout-withdraw-main-all" @click="cashAllMoney">全部提现</view>
			</view>
		</view>

		<view class="layout-button">
			<button
				@click.stop="submit"
				:disabled="!canCash"
				:class="{
					disabled: !canCash
				}"
			>
				申请提现
			</button>
		</view>

		<view class="layout-footer" @click="changeIsProtocol">
			<image class="layout-footer-icon" :src="protocolIcon[agreeDeal ? 'active' : 'default']" />
			<text class="layout-footer-text">勾选即同意</text>
			<text class="layout-footer-text-blue" @click.prevent.stop="clickOpenProtocol">《共享经济合作伙伴协议》</text>
		</view>
	</view>
</template>

<script>
import { incomeData } from '@/api/my';
import { defaultImageUrl } from '@/utils';

import DistributionNavBar from '@/components/distributionNavBar/indeHome';

// const mainBgImageUrl = Object.freeze(`${defaultImageUrl}image/img_wdsy_bj.png`);
const centerBgImageUrl = Object.freeze(`${defaultImageUrl}image/img_wdsy_white.png`);

const bankIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);
const withdrawIcon = Object.freeze(`${defaultImageUrl}icon/icon_wdsy_tx.png`);
const protocolIcon = Object.freeze({
	active: `/static/icon/icon_income_choose_active@3x.png`,
	default: `${defaultImageUrl}icon/icon_srjr_wx_default.png`
});

// 提现最小额度
const withdrawMinimumAmount = 10;
const typeAmountList = Object.freeze([
	{
		type: 'yesterdayProfitYuan',
		label: '昨日收益(元)'
	},
	{
		type: 'todayProfitYuan',
		label: '今日收益(元)'
	},
	{
		type: 'latestProfitYuan',
		label: '近7天收益(元)'
	},
	{
		type: 'monthProfitYuan',
		label: '本月收益(元)'
	}
]);

export default {
	data() {
		return {
			bankIcon,
			withdrawIcon,
			protocolIcon,
			centerBgImageUrl,

			// mainBgImageUrl,
			typeAmountList,

			incomeParams: {},

			cashMoney: undefined, //提现的金额
			agreeDeal: false
		};
	},

	created() {
		this.getIncomeData();
	},

	computed: {
		inputPlaceholder() {
			return `请输入提现金额（不低于${withdrawMinimumAmount}元）`;
		},

		canCash() {
			const { incomeParams, cashMoney } = this;
			if (!incomeParams || !cashMoney) {
				return false;
			}
			const formatValue = parseFloat(cashMoney) || 0;
			if (
				!incomeParams.cashProfit ||
				incomeParams.cashProfit < withdrawMinimumAmount ||
				formatValue < withdrawMinimumAmount ||
				formatValue > incomeParams.cashProfit / 100
			) {
				return false;
			}
			return true;
		}
	},

	filters: {
		getLocaleMoneyIncome(yuan) {
			let strMoney = Number(yuan);

			if (!strMoney) {
				return '0.00';
			}
			strMoney = strMoney.toLocaleString();

			if (strMoney.indexOf('.') === -1) {
				return strMoney + '.00';
			} else if (strMoney.indexOf('.') + 2 === strMoney.length) {
				return strMoney + '0';
			} else {
				return strMoney;
			}
		}
	},

	methods: {
		//全部提现
		cashAllMoney() {
			this.cashMoney = this.incomeParams.cashProfitYuan;
		},

		//清除提现金额
		clearCashMoney() {
			this.cashMoney = '';
		},

		//跳转明细记录
		goToHistory() {
			uni.navigateTo({
				url: '/otherPage/IncomeDetail'
			});
		},

		//跳转协议
		clickOpenProtocol() {
			const webView = `${defaultImageUrl}webView/SharingEconomyAgreement.html`;
			const url = `/tandianPage/CommonWebView?webView=${webView}`;

			uni.navigateTo({
				url
			});
		},

		// 切换协议状态
		changeIsProtocol() {
			this.agreeDeal = !this.agreeDeal;
		},

		//点击提现
		submit() {
			const { agreeDeal, canCash, cashMoney } = this;

			if (!canCash) {
				return;
			}

			if (!agreeDeal) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '请先勾选协议'
				});
				return;
			}

			const url = `/otherPage/ApplyWithdrawal?amount=${parseFloat(cashMoney)}`;

			uni.navigateTo({
				url
			});
		},

		clickBack() {
			uni.navigateBack();
		},

		getIncomeData() {
			incomeData().then((res) => {
				this.incomeParams = res?.data || {};
			});
		},

		changeSearchValue(e) {
			let value = parseFloat(e.detail.value) || '';

			if (value && parseInt(value, 10) !== value) {
				value = value.toString();
				const index = value.indexOf('.');

				index !== -1 && (value = value.substring(0, 2 + index + 1));
				value.substring(index + 1, value.length).length > 3 && (value = parseFloat(value).toFixed(2));
			}

			this.cashMoney = value;
		}
	},

	components: {
		DistributionNavBar
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

/deep/ .e-navbar {
	padding-left: 0 !important;
}

.layout {
	@include Db_iosBottomDistance();

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 480rpx;
		background: linear-gradient(318deg, #E1E6FB 0%, #E9EFFF 100%);
	}

	&-header {
		image {
			width: 48rpx;
			height: 48rpx;
			margin-left: 20rpx;
		}
	}

	&-main {
		padding-top: 32rpx;
		position: relative;

		> image {
			position: absolute;
			top: -44rpx;
			right: 0;
			z-index: 0;

			width: 360rpx;
			height: 360rpx;
		}

		&-income {
			position: absolute;
			top: 18rpx;
			right: 0;
			z-index: 10;
			height: 64rpx;

			display: flex;
			align-items: center;
			padding-left: 22rpx;

			background: rgba(0, 0, 0, 0.7);
			border-radius: 200rpx 0 0 200rpx;

			color: #fff;
			font-size: 24rpx;
			font-weight: 500;

			&-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}

		&-title {
			position: sticky;
			padding-left: 32rpx;

			display: flex;
			flex-direction: column;

			text {
				&:first-child {
					color: #461e04;
					font-size: 26rpx;
				}

				&:last-child {
					margin-top: 8rpx;

					color: #240c00;
					font-size: 68rpx;
					font-weight: bold;
					font-family: font-number;
				}
			}
		}

		&-typeAmount {
			height: 272rpx;
			position: sticky;
			padding: 0 20rpx;
			background-size: cover;
			background-repeat: no-repeat;

			&-content {
				display: flex;
				padding-top: 72rpx;

				&-item {
					flex: 1;
					height: 84rpx;
					position: sticky;
					text-align: center;

					border-right: 2rpx solid #eee;

					&:last-child {
						border-right: none;
					}

					&-text {
						color: #666;
						font-size: 20rpx;
					}

					&-money {
						margin-top: 12rpx;

						color: #000;
						font-size: 36rpx;
						font-weight: bold;
						font-family: font-number;
					}
				}
			}

			&-hint {
				margin-top: 30rpx;

				color: #ff6b11;
				font-size: 22rpx;
				text-align: center;
			}
		}
	}

	&-withdraw {
		margin-top: 4rpx;
		padding: 0 20rpx;

		&-title {
			display: flex;
			align-items: center;

			color: #1f1f1f;
			font-size: 28rpx;
			font-weight: 500;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
			}
		}

		&-main {
			margin-top: 20rpx;
			position: relative;

			&-input {
				width: 100%;
				height: 116rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #1f1f1f;
				padding: 0 224rpx 0 36rpx;

				background: #fff;
				border-radius: 24rpx;
				box-shadow: 0px 2px 15px -4px rgba(41,41,41,0.12);
				border: 2rpx solid rgba(83,89,255,0.2);
			}

			/deep/ &-input-placeholder {
				color: #999;
				font-size: 32rpx;
				font-weight: 400;
			}

			view {
				position: absolute;
				top: 50%;

				display: flex;
				align-items: center;
				justify-content: center;
				transform: translateY(-50%);
			}

			&-close {
				right: 152rpx;

				&-icon {
					width: 48rpx;
					height: 48rpx;
					margin: 20rpx;
				}
			}

			&-all {
				z-index: 99;
				right: 24rpx;
				width: 140rpx;
				height: 64rpx;

				font-size: 24rpx;
				font-weight: 500;
				color: $themeColor;

				background: #F5F5FC;
				border-radius: 32rpx;
			}
		}
	}

	&-button {
		margin-top: 70rpx;
		padding: 0 20rpx;

		button {
			@include Db_newButton(88rpx, 24rpx);

			// background: #ff6b11;

			// &.active,
			// &:active {
			// 	background: rgba(255, 107, 17, 0.7);
			// }

			// &.disabled {
			// 	background: rgba(255, 107, 17, 0.4);
			// }
		}
	}

	&-footer {
		margin-top: 44rpx;

		display: flex;
		align-items: center;
		justify-content: center;

		color: #666;
		font-size: 24rpx;
		font-weight: 400;

		&-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 2rpx;
		}

		&-text-blue {
			color: $themeColor;
		}
	}
}
</style>
